<script>
  import VScaleScreen from '../package/component';
  import moment from 'moment';
  import 'moment/dist/locale/zh-cn';
  import axios from 'axios';

  import * as echarts from 'echarts';
  import 'echarts-gl';

  export default {
    components: {VScaleScreen},
    data() {
      return {
        currentTime: '',
        interval: null,
        jsonData: null,
        data_hide: false
      }
    },
    created() {
      this.updateTime();
      this.interval = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
      clearInterval(this.interval);
    },
    mounted() {
      this.$nextTick(() => {
        this.indexchart();
        this.attackchart();
        this.businesschart();
      })
    },
    methods: {
      updateTime() {
        this.currentTime = moment().format('YYYY年MM月DD日 dddd HH:mm:ss');
      },
      expand() {
        this.data_hide = true
      },
      close() {
        this.data_hide = false
      },
      indexchart() {
        var chart1 = echarts.init(document.getElementById('index'));
        chart1.setOption({
          tooltip: {},
          grid: {
            top: '30px',
            right: '30px',
            bottom: '30px',
            left: '30px'
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: [ '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
              fontSize: 14,
              color: '#96A9BA'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 14,
              color: '#96A9BA'
            },
            splitLine: {
              lineStyle: {
                color: '#96A9BA'
              }
            },
            min: 0,
            max: 100,
            interval: 50
          },
          series: [
            {
              data: [ 51, 23, 57, 38, 74, 62],
              type: 'line',
              smooth: true,
              lineStyle: {
                width: 5,
                color: '#2FDAFF'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0,0,0,1,[{
                  offset: 1,
                  color: 'rgba(47,218,255,0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(47,218,255,0.3)'
                }, {
                  offset: 0,
                  color: 'rgba(47,218,255,1)'
                }])
              }
            }
          ]
        });
      },
      attackchart() { 
        const animationDuration = 1500
        const timeLine = ['03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15'];
        const rzData= [90, 380, 170, 260, 150, 340, 230];
        const lzData= [1400, 600, 700, 700, 1400, 400, 400];
        const newrz=[],newlz=[];
        var totalrz=0, totallz=0;
        for(var i=0; i<rzData.length; i++) {
          totalrz += rzData[i];
        }
        for(var i=0; i<rzData.length; i++) {
          newrz[i] = (rzData[i] * 100 / totalrz).toFixed(2);
        }
        for(var i=0; i<lzData.length; i++) {
          totallz += lzData[i];
        }
        for(var i=0; i<lzData.length; i++) {
          newlz[i] = (lzData[i] * 100 / totallz).toFixed(2);
        }

        var chart2 = echarts.init(document.getElementById('attack_chart'));
        chart2.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: '0',
            right: 'center',
            width: 600,
            itemWidth: 14,
            itemGap: 80,
            textStyle: {
              width: 240,
              color: '#A0A9C1',
              backgroundColor: '#262F38',
              fontSize: '14',
              lineHeight: '26',
            },
            formatter: function(name) {
              if(name == '国内数量') {
                return '          ' + name + '          ' + totalrz;
              } else {
                return '          ' + name + '          ' + totallz;
              }
            }
          },
          grid: [
            {
              show: false,
              left: '0',
              top: '30',
              bottom: '0',
              containLabel: true,
              width: '260'
            }, {
              show: false,
              left: '310',
              top: '30',
              bottom: '20',
              width: '0'
            }, {
              show: false,
              right: '0',
              top: '30',
              bottom: '0',
              containLabel: true,
              width: '260'
            }
          ],
          xAxis: [
            {
              type: 'value',
              inverse: true,
              axisLine: {
                show: false,
                onZero: true
              },
              axisTick: {
                show: false
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                formatter: "{value}%",
                color: '#96A9BA',
                fontSize: 14
              },
              splitLine: {
                show: false
              },
              min: 0,
              max: 40,
              interval: 10
            }, {
              gridIndex: 1,
              show: false
            }, {
              gridIndex: 2,
              axisLine: {
                show: false,
                onZero: true
              },
              axisTick: {
                show: false
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                formatter: "{value}%",
                color: '#96A9BA',
                fontSize: 14
              },
              splitLine: {
                show: false
              },
              min: 0,
              max: 40,
              interval: 10
            }
          ],
          yAxis: [
            {
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
              },
              data: timeLine
            }, {
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'center',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                color: '#DAECF6',
                fontSize: 14,
                align: 'center'
              },
              data: timeLine.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center'
                  }
                }
              })
            }, {
              gridIndex: 2,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: timeLine
            }
          ],
          series: [
            {
              name: '国内数量',
              type: 'bar',
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  1,0,0,0,[{
                    offset: 0,
                    color: '#4F799A'
                  },{
                    offset: 1,
                    color: '#9DC9EC'
                  }]
                )
              },
              barWidth: 6,
              data: newrz,
              animationDuration
            }, {
              name: '国外数量',
              type: 'bar',
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,0,1,0,[{
                    offset: 0,
                    color: '#64AB88'
                  },{
                    offset: 1,
                    color: '#C5F4D0'
                  }]
                )
              },
              barWidth: 6,
              xAxisIndex: 2,
              yAxisIndex: 2,
              data: newlz,
              animationDuration
            }
          ]
        });
      },
      businesschart() {
        const piedata = [
          { value: 100, name: '泵与电机' },
          { value: 220, name: '电子芯片' },
          { value: 100, name: '汽摩及配件' },
          { value: 260, name: '衣服衣帽' },
          { value: 120, name: '新能源' },
          { value: 200, name: '文化教育' }
        ]

        var chart3 = echarts.init(document.getElementById('business_chart'));
        chart3.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            width:'400',
            top: 'middle',
            right: '0',
            itemWidth: 14,
            textStyle: {
              color: '#96A9BA',
              fontSize: '18',
              lineHeight: 30
            },
            formatter: function(name) {
              var total = 0;
              for(var i=0; i<piedata.length; i++) {
                total += piedata[i].value;
              }
              for(i=0; i<piedata.length; i++) {
                var dpercent=(piedata[i].value/total*100).toFixed(0)+' %'
                if(piedata[i].name === name)
                return ' '+ name + '  ' + dpercent + '  ';
              }
            }
          },
          series: [{
            type: 'pie',
            radius: ['67%', '82%'],
            padAngle: 3,
            avoidLabelOverlap: true,
            showEmptyCircle: true,
            label: {
              show: true,
              position: 'center',
              color: '#fff',
              fontSize: 18,
              formatter: () => {
                let str = '行业分布'
                return str
              }
            },
            center:['15%','50%'],
            data: piedata
          },{
            type: 'pie',
            tooltip: {
              show: false,
            },
            emphasis: {
              scale: false
            },
            center:['15%','50%'],
            radius: ['92%', '92%'],
            label: {
              show: false
            },
            data: [{
              value: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#5F666C'
              }
            }]
          }]
        });
      },
    }
  };
</script>

<template>
  <VScaleScreen width="3200" height="1080">
    <div id="mainbg">
      <div id="top">
        <img src="/src/images/top_title.png" alt="" />
      </div>
      <div id="earth" ref="myworld"></div>
      <div id="index"></div>
      <div id="company_list" v-show="data_hide">
        <img src="/src/images/company_list.png" alt="" />
        <div id="close" @click="close"></div>
      </div>
      <div id="left">
        <div id="time">{{currentTime}}</div>
        <div id="business" class="left_box">
          <div class="title">入驻企业情况</div>
          <div>
            <div class="business_summary">
              <div class="business_cell" @click="expand">
                <div><img src="/src/images/business_icon1.png" alt="" /></div>
                <div>
                  <div class="business_name">企业总数</div>
                  <div class="business_sum">10</div>
                </div>
              </div>
              <div class="business_cell">
                <div><img src="/src/images/business_icon2.png" alt="" /></div>
                <div>
                  <div class="business_name">正常数量</div>
                  <div class="business_sum">10</div>
                </div>
              </div>
              <div class="business_cell">
                <div><img src="/src/images/business_icon3.png" alt="" /></div>
                <div>
                  <div class="business_name">异常数量</div>
                  <div class="business_sum">0</div>
                </div>
              </div>
            </div>
            <div id="business_chart"></div>
          </div>
        </div>
        <div id="attacktype" class="left_box">
          <div class="title">攻击类型</div>
          <div class="attack_box">
            <div id="point1" class="point"></div>
            <div id="point2" class="point"></div>
            <div id="point3" class="point"></div>
            <div id="point4" class="point"></div>
            <div id="point5" class="point"></div>
            <div id="point6" class="point"></div>
            <div id="pointname1" class="attack_name">木马病毒</div>
            <div id="pointname2" class="attack_name">网页篡改</div>
            <div id="pointname3" class="attack_name">访问恶意IP</div>
            <div id="pointname4" class="attack_name">蠕虫病毒</div>
            <div id="pointname5" class="attack_name">访问恶意下载源</div>
            <div id="pointname6" class="attack_name">DNS污染</div>
          </div>
        </div>
        <div id="operation" class="left_box">
          <div class="title">近期运维日志</div>
          <div class="alarm_title">
            <div class="alarm_row1">序号</div>
            <div class="alarm_row2">时间</div>
            <div class="alarm_row3">运维人</div>
            <div class="alarm_row4">结果</div>
          </div>
          <div class="alarm_tab">
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">1</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 18:56:51</div>
              <div class="alarm_row3 alarm_tab_inner">何阳德</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="none">异常</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">2</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 17:51:11</div>
              <div class="alarm_row3 alarm_tab_inner">蒋元慧</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">正常</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">3</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 16:41:42</div>
              <div class="alarm_row3 alarm_tab_inner">薛莹范</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">正常</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">4</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 16:31:12</div>
              <div class="alarm_row3 alarm_tab_inner">余瀚海</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">正常</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">5</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 15:11:57</div>
              <div class="alarm_row3 alarm_tab_inner">郑志新</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">正常</span></div>
            </div>
          </div>
        </div>
      </div>
      <div id="right">
        <div id="login">欢迎登录！<img src="/src/images/admin_icon.png" alt="" /> Admin</div>
        <div id="alarm" class="right_box">
          <div class="title">预警中心</div>
          <div class="alarm_title">
            <div class="alarm_row1">序号</div>
            <div class="alarm_row2">时间</div>
            <div class="alarm_row3">攻击情况</div>
            <div class="alarm_row4">处理情况</div>
          </div>
          <div class="alarm_tab">
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">1</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 18:56:51</div>
              <div class="alarm_row3 alarm_tab_inner">蠕虫病毒</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="none">未处理</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">2</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 17:51:11</div>
              <div class="alarm_row3 alarm_tab_inner">访问恶意IP</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="none">未处理</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">3</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 16:41:42</div>
              <div class="alarm_row3 alarm_tab_inner">访问恶意下载源</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">已处理</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">4</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 16:31:12</div>
              <div class="alarm_row3 alarm_tab_inner">木马病毒</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">已处理</span></div>
            </div>
            <div class="alarm_tab_line">
              <div class="alarm_row1 table_num">5</div>
              <div class="alarm_row2 alarm_tab_inner">2024-03-15 15:11:57</div>
              <div class="alarm_row3 alarm_tab_inner">网页篡改</div>
              <div class="alarm_row4 alarm_tab_inner"><span class="done">已处理</span></div>
            </div>
          </div>
        </div>
        <div id="attackstat" class="right_box">
          <div class="title">攻击事件统计</div>
          <div id="attack_chart"></div>
        </div>
        <div id="risk" class="right_box">
          <div class="title">风险处理</div>
          <div class="risk_box">
            <div class="risk_left">
              <div><img src="/src/images/risk_icon.png" alt="" /></div>
              <div class="risk_rate">100%</div>
              <div class="risk_rate_title">处理成功率</div>
            </div>
            <div class="risk_right">
              <div class="risk_line">
                <div>
                  <div class="risk_icon"><img src="/src/images/risk_icon1.png" alt="" /></div>
                  <div class="risk_title">平均耗时</div>
                </div>
                <div>
                  <div class="risk_time_sum">10</div>
                  <div class="risk_time">分钟</div>
                  <div class="done"><img class="risk_time_icon" src="/src/images/down.png" alt="" />1分钟</div>
                </div>
              </div>
              <div class="risk_line">
                <div>
                  <div class="risk_icon"><img src="/src/images/risk_icon2.png" alt="" /></div>
                  <div class="risk_title">相应速度</div>
                </div>
                <div>
                  <div class="risk_time_sum">24</div>
                  <div class="risk_time">小时</div>
                  <div class="none"><img class="risk_time_icon" src="/src/images/up.png" alt="" />1小时</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="bottom">
        <img src="/src/images/bottom_title.png" alt="" />
      </div>
    </div>
  </VScaleScreen>
</template>